<template>
  <main >
    <transition name="search">
    <div  @click="close($event)" v-if="searchShow" id="result">
      <div ref="searchPan" id="result-con">
        <div  id="searchInput">
          <input ref="SI"  @keyup.enter="searchHandle"  v-model="search" style="background-color:rgba(0,0,0,0);width: 100%;outline: none" type="text">
          <i @click="searchHandle" class="el-icon-search"></i>
        </div>
        <h3>"{{searchWord}}"的搜索结果:</h3>
        <div class="result-list" v-for="(item,index) in resultList" :key="item.id" >
          <div class="unitLeft">
            <img src="@/assets/img/Avatar.jpg" alt="">
            <div class="msg">
              <h3>{{item.companyName||item.universityName||item.studentName}}</h3>
              <p v-if="item.companyName">
                {{item.address}}-企业
              </p>
              <p v-else-if="item.universityName">
                {{item.address}}-高校-{{item.nature}}
              </p>
              <p v-else>
                {{item.address||'未填写'}}-学生-{{item.yearNum}}
              </p>
            </div>
          </div>
          <div class="unitRight">
            <el-button style="width: 100px" @click="concernBtn(item)"><i :class="isConcern(item)?'el-icon-check':'el-icon-plus'">{{isConcern(item)?'已关注':'关注'}}</i></el-button>
          </div>
        </div>
      </div>

    </div>
    </transition>
    <!--    翻页-->
    <div id="content" :class="$store.state.isSun?'content':'content2'" ref="content">
      <div id="bigTab">
        <div class="tab1">
          <h5>精技创新</h5>
        </div>
        <div class="tab2"></div>
      </div>
      <!--      <img id="sumiao" src="../../assets/img/sumiao.jpg" alt="">-->
      <div id="rightTab">
        <a title="畅言"><button id="barrage" style="color: white;font-weight: 500;background-color:deepskyblue;">弹</button></a>
        <a  href=mailto:1203207252@qq.com title="反馈"><button><i class="el-icon-message"></i></button></a>
        <a title="从头开始"><button @click="toTop"><i class="el-icon-arrow-up"></i></button></a>
        <a title="再来一屏"><button @click="nextPage"><i class="el-icon-arrow-down"></i></button></a>
      </div>

      <TopBar></TopBar>
      <article>
        <br><br><br>
        <div id="container">
          <Aside style="z-index: 1;"  :id="$store.state.aside?'aside':'aside2'"></Aside>
          <div id="center" ref="view">
            <transition name="slide-fade">
              <router-view></router-view>
            </transition>

          </div>

          <div id="right">
            <div id="search" >
              <input
                  v-model="search"
                  style="float:left;height:26px;width:83%;outline: none;background-color:rgb(223,223,223);"
                  :placeholder="searchPlace"
                  @keyup.enter="searchHandle"
                  type="text">
              <button @click="searchHandle()" id="searchBtn" style="">
                <i class="el-icon-search"></i>
              </button>

            </div>
            <br>
            <!--            卡片-->
            <Card></Card>
            <!--          排行榜-->
            <Ranking style="height: 600px">

            </Ranking>

          </div>
        </div>


      </article>
    </div>
  </main>
</template>

<script>
import Aside from "../../components/content/Aside";
import Ranking from "../../components/content/Ranking";
import TopBar from "../../components/content/TopBar";
import Card from "../../components/content/Card";
import {addConcern, cancelConcern, getConcernList, searchUser} from "../../network/user";
import {judgeObj} from "../../untils/judgeObj";
import {identification} from "../../untils/identification";
export default {
  name: "index.vue",
  components:{
    Aside,Ranking,TopBar,Card
  },
  data(){
    return{
      box:'',
      type:localStorage.getItem("userType"),
      uid:localStorage.getItem("userId"),
      searchShow:false,
      searchWord:'',
      search:'',
      resultList:[],
      colors:['blue','red','black','green','yellow','orange'],
      height:0,
      aside:false,
      searchPlace:'',
      timeRun:'',
      myConcern:[],
      concern: {
        sid:0,
        uid:0,
        cid:0,
        type:'',
        tid:''
      },
      colorChange:[]
    }
  },
  computed:{

  },

  methods:{
    addCon() {
      addConcern(this.concern)
          .then(res => {
            console.log(res)
            this.$message.warning(res.data.extend.msg)
            this.$store.state.number.focusNum++
            getConcernList(this.uid,this.type)
                .then(res=>{
                  this.myConcern=res.data.extend.concernList
                  console.log(this.myConcern)
                })
          })
    },
    cancelCon(){
      if(this.concern.tid==localStorage.getItem('userId')&&this.concern.type==localStorage.getItem('userType')){
        this.$message.warning("不能取消关注自己!")
        return
      }
      cancelConcern(this.concern)
          .then(res=>{
            console.log(res)
            this.$message.warning(res.data.extend.msg)
            this.$store.state.number.focusNum--
            getConcernList(this.uid,this.type)
                .then(res=>{
                  this.myConcern=res.data.extend.concernList
                  console.log(this.myConcern)
                })
          })
    },
    concernBtn(item){
      let type=localStorage.getItem('userType')
      let id=localStorage.getItem('userId')
      if(type=='student'){
        this.concern.sid=id
      }else if(type=='company'){
        this.concern.cid=id
      }else {
        this.concern.uid=id
      }
      let user=identification(item)
      this.concern.tid=user.uid      //获取被关注人id
      this.concern.type=user.type      //获取被关注人的类型
      if(this.isConcern(item)){
        this.cancelCon()
      }else {
        this.addCon()
      }

    },
    isConcern(item){
      return  judgeObj(this.myConcern,item)
    },
    searchHandle(){
      if(!this.search){
        return
      }
      this.searchShow=true
      getConcernList(this.uid,this.type)
      .then(res=>{
        this.myConcern=res.data.extend.concernList
        console.log(this.myConcern)
      })
      searchUser(this.search)
          .then(res=>{
            console.log(res)
            this.searchWord=this.search
            this.resultList=res.data.extend.list
            this.$refs.SI.focus()
          })
    },

    close(e){
      if(!this.$refs.searchPan.contains(e.target)){
        this.searchShow=false
      }

    },
    fontScroller(){
      const msg='搜索感兴趣的用户'
      let index=1
      this.timeRun=setInterval(()=>{
        if(index<=8){
          this.searchPlace=msg.slice(0,index++)+'_'
        }else {
          this.searchPlace=''
          index=0
        }
      },300)
    },
    nextPage(){
      this.$refs.view.scrollTo({
        top: this.height+=400,
        behavior: "smooth"
      });
    },
    toTop(){
      this.height=0
      this.$refs.view.scrollTo({
        top:0,
        behavior:'smooth'
      })
    }
  },
  mounted() {
    this.fontScroller()
    let colors=this.colors
    let i=0
    this.colorChange=setInterval(()=>{
      document.getElementById("barrage").style.backgroundColor=colors[i]
      i++

      if(i==5){
        i=0
      }
    },3000)
    this.box=this.$refs.view;
    this.box.addEventListener('scroll',()=>{

      let top=document.getElementById("addSwitch").offsetTop

      console.log(top)
      if(top>180){
        this.$store.state.addSwitch=false
      }else {
        this.$store.state.addSwitch=true
      }

    })
  },
  beforeDestroy() {
    clearInterval(this.timeRun)
    clearInterval(this.colorChange)
  }
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@1,700&display=swap');

.slide-fade-enter-active {
  transition: all .3s ease;
  transition-delay: .3s;
}

.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter, .slide-fade-leave-to
{
  transform: translateY(-20px);
  opacity: 0;
}

.search-enter-active {
  transition: all .3s ease;
}

.search-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.search-enter, .search-leave-to
{
  transform: translateX(60px);
  opacity: 0;
}
.result-list{
  margin: 10px;
  width: 98%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px;
  transition: box-shadow .2s;
  border: 1px solid #ead5d5;
  cursor: pointer;
}
.result-list:hover{
  box-shadow: 0 0 3px gray;
}
.unitLeft{
  color: rgb(109,109,109);
  height: 100%;
  width: 40%;
  justify-content: space-between;
  display: flex;
}
.unitLeft *{
  margin: 0;
}

.unitLeft img{
  height: 100%;
  width: 60px;
  border-radius: 5px;
}
.msg{
  width: 74%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.unitRight{
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#searchInput{
  width: 100%;
  height: 30px;
  border-radius: 15px;
  display: flex;
  position: sticky;
  top: 0;
  align-items: center;
  box-sizing: border-box;
  padding: 0px 20px;
  background-color: #cbbbbb;
}
#result{
  z-index: 10;
  position: absolute;
  width: 100vw;
  display: flex;
  justify-content: center;
  height: 100vh;
  background-color:rgba(255,255,255,0.3);
}
#result-con{
  position: relative;
  margin-top: 80px;
  margin-left: -3%;
  width: 44%;
  height: 85%;
  overflow: auto;
  background: #faebeb;
  box-sizing: border-box;
  padding: 20px;
}
#rightTab {
  width: 40px;
  height: 140px;
  background-color: #fff;
  position: fixed;
  bottom: 16%;
  right: 5%;
  z-index: 4;
}
#searchBtn{
  cursor:pointer;
  background-color:rgb(197,197,197);
  float:left;width:26px;
  height: 28px;
  outline: none;
}
#searchBtn:hover{
  background-color: rgb(142, 167, 173);
}
#rightTab button {
  cursor: pointer;
  width: 100%;
  height: 25%;
  background-color: #fff;
  outline: none;
  transition: all 1s;
}

#rightTab button:hover {
  background-color: rgb(216, 216, 216);
}

#logo {
  float: left;
  width: 140px;
  height: 60px;
  background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, blue 100%);
  -webkit-text-fill-color: transparent; /* 将字体设置成透明色 */
  -webkit-background-clip: text; /* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 12s linear infinite;
}

@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
input, button {
  border-radius: 0;
  border: none;
}
main {
  width: 100vw;
  height: 100vh;
  background-color:#e1e1e1;
}

.content {
  transition: all 1s;
  width: 100%;
  height: 100%;
  background-color: rgba(248, 248, 248, .9);
}

.content2 {
  transition: all 1s;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
}

header {
  box-sizing: border-box;
  padding: 0 15%;
  width: 100%;
  height: 65px;
  background-color: rgba(255, 255, 255, .4);
  top: 0;
  opacity: 1;
  position: fixed;
  z-index: 5;
}
#switch{
  display: none;
}
header * {
  margin: 0;
  padding: 0;
}

header h2 {
  float: left;
  color: rgb(57, 162, 245);
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 65px;
}

header h5 {
  float: left;
  color: rgb(57, 162, 245);
  line-height: 70px;
  margin-left: 70px;
  font-family: 'ZCOOL XiaoWei', serif;
}

::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

article {
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

#container {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  width: 70%;
  height: 100%;
  margin: 0 auto;
}

#center {
  flex: 1;
  overflow: auto;
  width: 58%;
  height: 100vh;
  padding: 0 15px;
  box-sizing: border-box;
}

#right {
  height: 100vh;
  width: 20%;
  box-sizing: border-box;
  /*padding-left: 11px;*/
  background-color: rgba(255, 255, 255, .2);
}

#search {
  box-sizing: border-box;
  padding: 11px 10px;
  width: 100%;
  height: 48px;
  background-color: rgba(255, 255, 255, .7);
}

#avatar {
  float: right;
  width: 35px;
  height: 35px;
  margin-right: 10px;
  line-height: 90px;
  border-radius: 50%;

}

#avatar img:hover {
  cursor: pointer;
  transition: all 1s;
  transform: rotate(360deg);
  transform-origin: center;
}

#exit {
  background-color: rgb(64, 158, 255);
  width: 60px;
  height: 20px;
  color: white;
  float: right;
  margin-top: 20px;
  font-size: 12px;
  border-radius: 3px;
}
#aside{
  width: 16%;
}
#aside2{
  width: 16%;
}
#bigTab {
  width: 50px;
  height: 200px;
  position: fixed;
  bottom: 10%;
  left: -1%;
  transition: all .1s;
  z-index: 3;
}

#bigTab:hover {
  cursor: pointer;
  left: -.5%;
}

.tab1 {
  padding-left: 20px;
  box-sizing: border-box;
  width: 40px;
  height: 100px;
  background-color: orange;
  color: white;
  position: absolute;
  z-index: 2;
  animation: updown 2s ease-in-out infinite;
}

.tab2 {
  position: absolute;
  width: 45px;
  height: 100px;
  background-color: lightskyblue;
  z-index: 1;
  animation: downup 2s ease-in-out infinite;
}
#sumiao{
  position: absolute;
  z-index: 0;
  opacity: .15;
  top: 100px;
  left: -100px;
}
@keyframes updown {
  0% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}
@keyframes downup {
  0% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(10px);
  }
}
@media screen and (max-width: 600px) {
  main {
    background:lightblue;
  }
  #rightTab,#bigTab,#header-right{
    display: none;
  }
  header{
    padding: 0 5%;
    text-align: center;
    display: flex;
    justify-content: left;
  }
  #logo{

  }
  #container{
    width: 100%;
    overflow: hidden;
  }
  #right{
    display: none;
  }
  #switch{
    display: block;
    width: 30%;
    font-size: 25px;
    background-color:rgba(0,0,0,0);
    text-align: left;
    outline: none;
  }
  #aside{
    font-size: 12px;
    width: 35%;
    transition: all .3s ease-out;
    position: static;
    margin-left: 0;
  }
  #aside2{
    font-size: 12px;
    width: 35%;
    transition: all .3s ease-in;
    position: static;
    margin-left: -35%;
  }

}
</style>
